<template>
    <div id="app">
        <Head/>
        <!--给路由添加切换动画-->
        <transition :name="transitionName">
            <router-view class="app-router" />
        </transition>
        <!--loading弹窗，根据vuex状态管理实现-->
        <div v-loading.fullscreen.lock="this.$store.state.LOADING"></div>
        <Footer/>
    </div>
</template>

<script>
    import Head from "./components/common/Head";
    import Footer from "./components/common/Footer";
    export default {
        name: "App",
        components: {Head, Footer},
        data() {
            return {
                transitionName: 'slide-right' // 默认动态路由变化为slide-right
            }
        },
        watch: {
            /*监听路由，添加切换动画*/
            '$route'() {
                let isBack = this.$router.isBack
                if (isBack) {
                    this.transitionName = 'slide-right'
                } else {
                    this.transitionName = 'slide-left'
                }
                this.$router.isBack = false
            },
            // eslint-disable-next-line no-dupe-keys
            // $route: {
            //     // eslint-disable-next-line no-unused-vars
            //     handler: function(val, oldVal){
            //         console.log(val !== oldVal);
            //         console.log("this.$store.state.LOADING"+this.$store.state.LOADING);
            //         if (val !== oldVal) {
            //             this.$store.state.LOADING = false
            //         }
            //     },
            //     // 深度观察监听
            //     deep: true
            // }
        }
    }
</script>

<style>
    #app {
        height: 100%;
    }

    /*给router-view添加动画*/
    .app-router {
        position: absolute;
        width: 100%;
        height: 100%;
        transition: all .4s ease;
    }

    .slide-left-enter,
    .slide-right-leave-active {
        opacity: 0;
        -webkit-transform: translate(100%, 0);
        transform: translate(100%, 0);
    }


    .slide-left-leave-active,
    .slide-right-enter {
        opacity: 0;
        -webkit-transform: translate(-100%, 0);
        transform: translate(-100% 0);
    }
</style>
